<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">计算百分比</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " id="targetprice-tab" data-toggle="tab" href="#targetprice" role="tab" aria-controls="targetprice" aria-selected="false">目标价位</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">计算过买点损失百分比</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">计算可买数量</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-oooooo" data-toggle="tab" href="#oooooo" role="tab" aria-controls="oooooo" aria-selected="false">点位计算</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div id="calcBFB" style="margin: 0 auto;">
                    <div class="row" style="height: 30px;"></div>
                    <div class="row">
                        <label class="col-md-2 control-label" >基准值:</label>
                        <div class="col-md-3">
                            <input name="valBase" placeholder="基准值" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">目标值:</label>
                        <div class="col-md-3">
                            <input name="valTarget" placeholder="目标值" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">计算结果(%):</label>
                        <div class="col-md-3">
                            <input name="valResult" readonly="readonly" placeholder="计算结果" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <button type="button"  class="btn btn-primary form-control" onclick="calcBFB();">计算</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="targetprice" role="tabpanel" aria-labelledby="targetprice-tab">
                <div id="calcTargetPrice" style="margin: 0 auto">
                    <div class="row" style="height: 30px;"></div>
                    <div class="row">
                        <label class="col-md-2 control-label">基本值:</label>
                        <div class="col-md-3">
                            <input name="baseVal" placeholder="基本值" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">百分比%:</label>
                        <div class="col-md-3">
                            <input name="biRate" placeholder="百分比" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">上限值:</label>
                        <div class="col-md-3">
                            <input name="valHigh" readonly="readonly" placeholder="" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">下限值:</label>
                        <div class="col-md-3">
                            <input name="valLow" readonly="readonly" placeholder="" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-primary form-control" onclick="calcTargetVal();">计算</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div id="calcGMDSSBFB" style="margin: 0 auto">
                    <div class="row" style="height: 30px;"></div>
                    <div class="row">
                        <label class="col-md-2 control-label">突破值:</label>
                        <div class="col-md-3">
                            <input name="brkVal" placeholder="突破值" class="form-control" onchange="calcGMDSSBFB_brkValChange();"   />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">实际买入值:</label>
                        <div class="col-md-3">
                            <input name="realBuyVal" placeholder="实际买入值" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">突破值损失百分比(%):</label>
                        <div class="col-md-3">
                            <input name="brkRate" value="8" placeholder="突破值损失百分比" class="form-control" />
                        </div>
                    </div>

                    <div class="row">
                        <label class="col-md-2 control-label">股数</label>
                        <div class="col-md-3">
                            <input name="buyStockAmt" value="" placeholder="股数" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">目标价位</label>
                        <div class="col-md-3">
                            <input name="targetPrice" value="" placeholder="目标价位" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">实际损失百分比(%):</label>
                        <div class="col-md-3">
                            <input name="valResult" readonly="readonly" placeholder="实际损失百分比" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">止损价位</label>
                        <div class="col-md-3">
                            <input name="stopPrice" readonly="readonly" placeholder="止损价位" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">收益损失比率</label>
                        <div class="col-md-3">
                            <input name="slssRate" readonly="readonly" placeholder="收益损失比率" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">预计损失金额</label>
                        <div class="col-md-3">
                            <input name="preLossAmt" readonly="readonly" placeholder="预计损失金额" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">预计收益金额</label>
                        <div class="col-md-3">
                            <input name="preMakeAmt" readonly="readonly" placeholder="预计收益金额" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-primary form-control" onclick="calcGMDSSBFB();">计算</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div id="calcKMSL" style="margin: 0 auto">
                    <div class="row" style="height: 30px;"></div>
                    <div class="row">
                        <label class="col-md-2 control-label">突破值:</label>
                        <div class="col-md-3">
                            <input name="brkVal" class="form-control" placeholder="突破值" onchange="calcKMSL_brkValChange();">
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">实际买入值:</label>
                        <div class="col-md-3">
                            <input  name="realBuyVal" placeholder="实际买入值" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">总资金量:</label>
                        <div class="col-md-3">
                            <input  name="totalMoey" placeholder="总资金量" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">损失极限(%):</label>
                        <div class="col-md-3">
                            <input  name="lossLimit" value="10" placeholder="损失极限" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">突破下浮(%):</label>
                        <div class="col-md-3">
                            <input  name="brkLimit"  value="8" placeholder="突破下浮" class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">计算结果(%):</label>
                        <div class="col-md-3">
                            <input name="valResult" readonly="readonly" placeholder="计算结果" class="form-control"  />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <button type="button"  class="btn btn-primary form-control"  onclick="calcKMSL();">计算</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="oooooo" role="tabpanel" aria-labelledby="contact-oooooo">
                <div id="calcQh" style="margin: 0 auto">
                    <div class="row" style="height: 30px;"></div>
                    <div class="row">
                        <label class="col-md-2 control-label">突破值:</label>
                        <div class="col-md-3">
                            <input name="brkVal" placeholder="突破值" onchange="brkValChange();" class="form-control">
                        </div>
                        <div class="col-md-1">
                            <table>
                                <tr>
                                    <td>
                                        <img src="../../images/calctools/add.png"   style="padding: 0px;width: 30px;height: 30px;" onclick="brkValAdd();" />
                                    </td>
                                    <td>
                                        <img src="../../images/calctools/dec.png" style="padding: 0px;width: 30px;height: 30px;" onclick="brkValDec();" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">目标值:</label>
                        <div class="col-md-3">
                            <input name="targetVal" placeholder="目标值" class="form-control">
                        </div>
                        <div class="col-md-1">
                            <table>
                                <tr>
                                    <td>
                                        <img src="../../images/calctools/add.png"   style="padding: 0px;width: 30px;height: 30px;" onclick="targetValAdd();" />
                                    </td>
                                    <td>
                                        <img src="../../images/calctools/dec.png" style="padding: 0px;width: 30px;height: 30px;" onclick="targetValDec();" />
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">成交值:</label>
                        <div class="col-md-3">
                            <input name="transVal" placeholder="成交值" class="form-control">
                        </div>
                        <div class="col-md-1">
                            <table>
                                <tr>
                                    <td>
                                        <img src="../../images/calctools/add.png"   style="padding: 0px;width: 30px;height: 30px;" onclick="transValAdd();" />
                                    </td>
                                    <td>
                                        <img src="../../images/calctools/dec.png" style="padding: 0px;width: 30px;height: 30px;" onclick="transValDec();" />
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">最新值:</label>
                        <div class="col-md-3">
                            <input name="newVal" placeholder="最新值" class="form-control">
                        </div>
                        <div class="col-md-1">
                            <table>
                                <tr>
                                    <td>
                                        <img src="../../images/calctools/add.png"   style="padding: 0px;width: 30px;height: 30px;" onclick="newValAdd();" />
                                    </td>
                                    <td>
                                        <img src="../../images/calctools/dec.png" style="padding: 0px;width: 30px;height: 30px;" onclick="newValDec();" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">比率:</label>
                        <div class="col-md-3">
                            <select name="rate" class="form-control">
                                <option value="2">1/2</option>
                                <option value="3" selected>1/3</option>
                                <option value="4">1/4</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">回撤止损值:</label>
                        <div class="col-md-3">
                            <input name="retVal" placeholder="回撤止损值" readonly="readonly" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">当前止损值:</label>
                        <div class="col-md-3">
                            <input name="currLimitVal" placeholder="当前止损值" readonly="readonly" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-md-2 control-label">损失点位:</label>
                        <div class="col-md-3">
                            <input name="lostAmt" placeholder="当前止损值" readonly="readonly" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-primary form-control" onclick="calcQh();">计算</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function calcTargetVal()
    {
        var baseVal = $("#calcTargetPrice input[name='baseVal']").val();
        var biRate = $("#calcTargetPrice input[name='biRate']").val();
        if(isNaN(baseVal)||isNaN(biRate))
        {
            return ;
        }
        var highValue=baseVal * (100.0+Number(biRate))/100.0 ;
        var lowValue =baseVal * (100.0-biRate)/100.0 ;
        highValue=highValue.toFixed(2);
        lowValue=lowValue.toFixed(2);

        $("#calcTargetPrice input[name='valHigh']").val(highValue);
        $("#calcTargetPrice input[name='valLow']").val(lowValue);
    }
    function calcGMDSSBFB_brkValChange()
    {
        var brkVal = $("#calcGMDSSBFB input[name='brkVal']").val();
        $("#calcGMDSSBFB input[name='realBuyVal']").val(brkVal);

    }
    function calcKMSL_brkValChange()
    {
        var brkVal = $("#calcKMSL input[name='brkVal']").val();
        $("#calcKMSL input[name='realBuyVal']").val(brkVal);
    }
    function newValDec()
    {
        var newVal = $("#calcQh input[name='newVal']").val();
        newVal--;
        $("#calcQh input[name='newVal']").val(newVal);
    }
    function newValAdd()
    {
        var newVal = $("#calcQh input[name='newVal']").val();
        newVal++;
        $("#calcQh input[name='newVal']").val(newVal);
    }
    function transValDec()
    {
        var transVal = $("#calcQh input[name='transVal']").val();
        transVal--;
        $("#calcQh input[name='transVal']").val(transVal);
    }
    function transValAdd()
    {
        var transVal = $("#calcQh input[name='transVal']").val();
        transVal++;
        $("#calcQh input[name='transVal']").val(transVal);
    }
    function brkValChange()
    {
        var brkVal = $("#calcQh input[name='brkVal']").val();
        $("#calcQh input[name='transVal']").val(brkVal);
        $("#calcQh input[name='newVal']").val(brkVal);
    }


    function brkValAdd()
    {
        var brkVal = $("#calcQh input[name='brkVal']").val();
        brkVal++;
        $("#calcQh input[name='brkVal']").val(brkVal);
    }
    function brkValDec()
    {
        var brkVal = $("#calcQh input[name='brkVal']").val();
        brkVal--;
        $("#calcQh input[name='brkVal']").val(brkVal);
    }


    function targetValAdd()
    {
        var targetVal = $("#calcQh input[name='targetVal']").val();
        targetVal++;
        $("#calcQh input[name='targetVal']").val(targetVal);
    }
    function targetValDec()
    {
        var targetVal = $("#calcQh input[name='targetVal']").val();
        targetVal--;
        $("#calcQh input[name='targetVal']").val(targetVal);
    }

    function calcQh() {
        var brkVal = $("#calcQh input[name='brkVal']").val();
        var targetVal = $("#calcQh input[name='targetVal']").val();
        var transVal = $("#calcQh input[name='transVal']").val();
        var newVal = $("#calcQh input[name='newVal']").val();
        var rate = $("#calcQh select[name='rate']").val();
        if (isNaN(brkVal) || isNaN(targetVal) || isNaN(transVal) || isNaN(rate)) {
            return;
        }
        var flag = brkVal > targetVal ? 'k' : 'd';
        var diff = Math.abs(brkVal - targetVal);
        var scale = (diff / (rate)).toFixed(0);
        $("#calcQh input[name='retVal']").val(scale);
        var isNumberNewVal = isNaN(newVal);
        if (!isNumberNewVal && newVal.trim() != '') {
            var currenLimitVal = 0;
            var lostAmt = 0;
            if (flag == 'k') {
                currenLimitVal = Number(newVal) + Number(scale);
                lostAmt = currenLimitVal - transVal;
            }
            else {
                currenLimitVal = newVal - scale;
                lostAmt = transVal - currenLimitVal;
            }
            $("#calcQh input[name='currLimitVal']").val(currenLimitVal);
            $("#calcQh input[name='lostAmt']").val(lostAmt);
        }
    }
    function calcKMSL() {
        var brkVal = $("#calcKMSL input[name='brkVal']").val();
        var realBuyVal = $("#calcKMSL input[name='realBuyVal']").val();
        var totalMoey = $("#calcKMSL input[name='totalMoey']").val();
        var lossLimit = $("#calcKMSL input[name='lossLimit']").val();
        var brkLimit = $("#calcKMSL input[name='brkLimit']").val();
        if (isNaN(brkVal) || isNaN(realBuyVal) || isNaN(totalMoey) || isNaN(lossLimit) || isNaN(brkLimit)) {
            return;
        }
        var targetLimitPrice = brkVal * (100 - brkLimit) / 100;
        var realBuyPriceLossPer = realBuyVal - targetLimitPrice;
        var totalLossMoney = totalMoey * lossLimit / 100;
        var lossStockets = totalLossMoney / realBuyPriceLossPer;
        var lossStockets = lossStockets.toFixed(2);
        var realCanStockets = totalMoey / realBuyVal;
        var realCanStockets = realCanStockets.toFixed(2);
        var result = lossStockets < realCanStockets ? lossStockets : realCanStockets;
        $("#calcKMSL input[name='valResult']").val(result);
    }
    function calcGMDSSBFB() {
        var brkVal = $("#calcGMDSSBFB input[name='brkVal']").val();
        var realBuyVal = $("#calcGMDSSBFB input[name='realBuyVal']").val();
        var brkRate = $("#calcGMDSSBFB input[name='brkRate']").val();
        if (isNaN(brkVal) || isNaN(realBuyVal) || isNaN(brkRate)) {
            return;
        }
        var brkVal = Number(brkVal);
        var realBuyVal = Number(realBuyVal);
        var brkRate = Number(brkRate);
        var valTarget = brkVal * (100 - brkRate) / 100;
        var valTargetDisp = valTarget.toFixed(2);
        $("#calcGMDSSBFB input[name='stopPrice']").val(valTargetDisp);
        var result = (realBuyVal - valTarget) * 100 / realBuyVal;
        result = result.toFixed(2);
        $("#calcGMDSSBFB input[name='valResult']").val(result);
        var buyStockAmt=$("#calcGMDSSBFB input[name='buyStockAmt']").val();
        if(!isNaN(buyStockAmt) && buyStockAmt.trim()!="")
        {
            var lostMoney = (realBuyVal-valTarget)*buyStockAmt ;
            lostMoney=lostMoney.toFixed(2)
            $("#calcGMDSSBFB input[name='preLossAmt']").val(lostMoney);
        }
        var targetPrice =$("#calcGMDSSBFB input[name='targetPrice']").val();
        if(!isNaN(targetPrice)&& targetPrice.trim()!="")
        {
            var shouYi = targetPrice-realBuyVal ;
            var loss = realBuyVal-valTarget ;
            var rate = shouYi/loss ;
            rate = rate.toFixed(2);
            $("#calcGMDSSBFB input[name='slssRate']").val(rate);

        }
        if(!isNaN(buyStockAmt) && buyStockAmt.trim()!=""  && !isNaN(targetPrice)&& targetPrice.trim()!="")
        {
            var preMakeMoney = (targetPrice-realBuyVal)*buyStockAmt;
            preMakeMoney=preMakeMoney.toFixed(2);
            $("#calcGMDSSBFB input[name='preMakeAmt']").val(preMakeMoney);
        }
    }
    function calcBFB() {
        var valBase = $("#calcBFB input[name='valBase']").val();
        var valTarget = $("#calcBFB input[name='valTarget']").val();
        if (isNaN(valBase) || isNaN(valTarget)) {
            return;
        }
        valBase = Number(valBase);
        valTarget = Number(valTarget);
        var result = (valTarget - valBase) * 100 / valBase;
        var result = result.toFixed(2);
        $("#calcBFB input[name='valResult']").val(result);
    }
</script>
</html>